<template>
  <div class="v-card-cont" :style="cardStyl">
    <div class="v-card-title-cont">
      {{ title }}
      <span class="unit" v-if="unit">{{ unit }}</span>
    </div>
    <div class="v-card-body-cont">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: [Number, String],
      default: "100%"
    },
    height: {
      type: [Number, String],
      default: "100%"
    },
    bgImg: {
      type: String
    },
    title: {
      type: String,
      default: "标题"
    },
    unit: {
      type: String
    }
  },
  computed: {
    cardStyl() {
      const styl = {
        width: this.width,
        height: this.height,
        "background-repeat": "no-repeat",
        "background-size": `${this.width} ${this.height}`,
        "background-position": "center center",
        "background-image": `url("${this.bgImg}")`
      };
      return styl;
    }
  }
};
</script>

<style lang="less" scoped>
.v-card-cont {
  padding: 10px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.v-card-title-cont {
  font-size: 22px;
  font-weight: 500;
  color: #ffffff;
}
.v-card-title-cont .unit {
  font-size: 12px;
}
.v-card-body-cont {
  flex: 1;
  padding-top: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
